<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="app">
        <div>{{ info.name }}</div>

        <a v-bind:href="info.url">{{ info.url }}</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    links: [],
                    url: null
            }
        },
        mounted() {
            /*
            $.get(
                "/static/data.json",
                function (data,state) {
                    console.log(data);
                    this.info=data;
                }
            );*/

            axios.get("/static/data.json").then(response=>(
                console.log(response.data),
                this.info = response.data
            ))
        },
    });
</script>
</html>